
<template>
   <div id="visual">
      <div class="visual_app">
         <topComponent name="榆林市公共资源交易平台数字见证大厅" @click.native="$router.push({path:'/ksh'})"></topComponent>
         <div class="top">
            <p @click="handleGoBack()">返回</p><p>{{ form.projectName }}<span style="margin-left: 10px;">{{ form.pbkstime }}</span></p><p></p>
         </div>
         <section>
            <menu>
               <div>
                  <el-form ref="form" :model="form" size="mini" label-width="40px" >
                              <el-form-item label="时间">   
                                 <el-date-picker
                                 style="width: 230px;"
                                    v-model="form.time"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    @change="handTimeChange"
                                    end-placeholder="结束日期">
                                 </el-date-picker>
                              
                              </el-form-item>
                              <el-form-item>
                                 <button  class="jfbutton" style="margin-left: 10px;" @click.prevent="handleSubmit">查询</button>
                              </el-form-item>
                           </el-form>
               </div>
              <el-scrollbar style="height: 100%;">
               <li v-for="(item,index) in listMenu"  :key="index" :class="{'activePer':index === activePerIndex}" @click="handleClickCurPer(item,index)">
                   <div >{{peopList[item.personType]}}</div>
                   <div ><touimgComponent  :src="touxianglist[index]"/></div>
                   <div style="position: relative;"><p>{{ item.personName }}</p> <p>{{ item.cardId }}</p> <div  :style="{background:item.color}" class="cirBiao"></div></div>
               </li>
              </el-scrollbar>
            </menu>
            <main>
               <proViewComponent :onGetPersColor="onGetPersColor" :xmName="form.projectName" ref="proView"/>
            </main>
         </section>
       </div>
   </div>
 </template>
  
 <script>
 import topComponent from "@/components/top"
 import { dvListPerson,dvListTrack,dvListAlarm } from "@/api/pageViewBig"
 import proViewComponent from "./proViewComponent.vue"
 import touimgComponent from "@/views/witness/components/Object3D/touimgComponent.vue"
//  import louceng_JSON from "@/views/witness/components/Object3D/canvas/louceng.json"
import { peopList } from "@/views/witness/components/Object3D/canvas/const"

 export default {
   components: { 
      topComponent,
      proViewComponent,
      touimgComponent
    },
    computed: {
   
      wsData() {
         console.log('wsdata',this.$websocket.getters.wsData)
        return this.$websocket.getters.wsData;
      }
    },
   watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
   data() {
   
     return {
      touxianglist:[require('@/assets/imgs/dp/专家.png'),require('@/assets/imgs/dp/专家2.png'),require('@/assets/imgs/dp/专家3.png')],
      listMenu:[],
      subscribedUrlArr:[],
      listAlarm:[],
      peopList,
      activePerIndex:null,
      form:{
         time:[],
         projectId:undefined,
         personId:undefined,
         bidId:undefined,
         projectName:undefined,
         pbkstime:undefined
      }
     }
   },
   
  async created() {
      const {projectId,bidId,pbkstime,personId,projectName} = this.$route.query
      this.form = { projectId,bidId,pbkstime,projectName,personId }
      await this.getDvListPerson()
      this.handleGetGUIAll()
      // this.getDvListAlarm()
      // this.webSocketTaskFn()
   },
   methods: {
      handleSubmit(){
         
      },
      handTimeChange(){

      },
      // 历史预警
      getDvListAlarm(){
         const { projectId,bidId,personId} = this.form
         const personIds = personId || this.listMenu.map(item=>item.personId)
         const params = {
            projectId,
            bidId,
            personIds,
            "start": "",
            "end": ""

         }
         dvListAlarm(params).then(res=>{
            this.listAlarm = res.data
            this.$refs.proView.setWanger(res.data)
            
         })
      },
      handleGoBack(){
         this.$router.go(-1)
      },
      // 获取人员列表
      getDvListPerson(){
         return new Promise((resolve,reject)=>{
            const params = {
              projectId:this.form.projectId,
              bdId: this.form.bidId
            }
            dvListPerson(params).then(res=>{
            if(res.code === 0 ){
               console.log('人员列表',res);
               this.listMenu = res.data
               // 找到当前选中的人
               if(this.form.personId){
         
                
                  const index =  res.data.findIndex(x=>{
                        return x.personId === this.form.personId
                     })
                     console.log('index',index);
                     
                  this.activePerIndex = index
               }
               resolve(res.data)
            }else{
               reject(res.msg)
            }
         })
        })
        
      },
      // 获取人员列表颜色属性
      onGetPersColor(list){
         this.listMenu.forEach((item,index)=>{
               item.color = ''
               list.forEach((ite)=>{
                  if(ite.personId === item.personId){
                     item.color = ite.HexString
                  }
               })
              
         })
        this.listMenu = [...this.listMenu]
         
      },
      // 选中人员
      handleClickCurPer(item,index){         
         if( index === this.activePerIndex){
            console.log('获取全部数据');
            this.activePerIndex  = null
            this.$set(this.form,'personId',undefined)
            this.handleGetGUIAll()
            return 
         }
         this.activePerIndex = index
         console.log('单人数据');
         this.$set(this.form,'personId',item.personId)
         this.handleGetGUIAll()
         // 获取轨迹
      },
      // 获取全部人员轨迹和单人
      handleGetGUIAll(){
      const { projectId,bidId,personId} = this.form
         let personIds = []
         if(personId){
            personIds = [personId]
         }else{
            personIds = this.listMenu.map(item=>item.personId)
         }
      const params = {
         projectId,
         bidId,
         personIds:personIds,
         "start": "",
         "end": ""
      }
      console.log('params',params);
      
      dvListTrack(params).then(res=>{
         if(res.code === 0){
            this.$refs['proView'].handleLineAll(res.data)
         }
      })
      },
        
      // 实时轨迹
      async webSocketTaskFn() {
      const bidId = this.form.bidId
      let url = "http://192.168.124.19:8880/witness/gdw/stomp";
      this.$websocket.dispatch("websocket_init", url);
      let url2 = `/ws/witness/track/${bidId}`;
      if (this.subscribedUrlArr.indexOf(url) === -1) {
         this.$websocket.dispatch("websocket_subscribe", url2);
         this.subscribedUrlArr.push(url);
      }
      },
   }
 }
 </script>
  
 <style lang="scss" scoped>
 #visual {
   width: 100%;
   height:100vh;
   overflow: hidden;
   background: url("../../../../assets/bg.jpg");
   background-size: 100% 100%;
   .top{
      display: flex;
      cursor: default;
      justify-content:space-between;
      padding: 0 10px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      color: #fff;
      background: linear-gradient(#1f4bba, #051449, #1c46a7);;
 
   }
   section{
      display: flex;
      height: calc(100vh - 160px);
      padding-bottom: 40px;
      menu{
         width: 365px;
         padding:10px 8px;
         background-image:url("../../../../assets/imgs/dp/底图@2x.png");
         background-size:100% 100%;
         margin: 20px 0px;
         text-align: center;
         li{
            display: inline-block;
            list-style: none;
            height: 200px;
            width: 148px;
            background-image: url('../../../../assets/imgs/dp/头像未选中背景@2x.png');
            background-size:100% 100%;
            margin-top: 20px;
            color: #fff;
            .cirBiao{
               width: 14px;
               height: 14px;
               border-radius: 10px;
               position: absolute;
               bottom: 0px;
               right: 30px;
            }
            &.activePer{
               background-image: url('../../../../assets/imgs/dp/头像选中背景@2x.png');
            }
            & > div:nth-child(1){
               height: 44px;
               line-height: 58px;
            }
            & > div:nth-child(2){
               width: 88px;
               height: 98px;
               padding-left: 30px;
            }
            & > div:nth-child(3){
               height: 40px;
               p{
                  margin: 0;
               }
            }
         }
       
      }
      main{
         width: 100%;
         margin: 20px 20px;
         box-sizing: border-box;
         border: 1px solid #0A6ACF;
      }
   }

 }

//  form表单
::v-deep .el-form {
   // border: 1px solid red;
   color: #fff;
 }
 ::v-deep .el-form-item__label{
   color: #fff;

 }
 //  时间框
::v-deep .el-range-input{
   background-color: #0c4f97;
   color: #fff;
 }
 ::v-deep .el-range-editor.el-input__inner{
   background-color: #0c4f97;
   border: 1px solid #4395FF;
   color: #fff;
 }
 ::v-deep .el-range-separator{
   color: #acacac;
   margin-top: -2px;
   // font-size: 14px;
 }
 .jfbutton{
   background-color: #4395FF;
   color: #fff;
   border: 2px solid #4395FF;
   border-radius: 2px;

 }

 </style>
